<template>
   <p-card :bordered="false">
    <div class="box-title">
      零散条码生成
    </div>
    <div class="box-params">
      <p-form-model
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
        <p-row :gutter="24">
          <p-col :xl="8" :lg="7" :md="8" :sm="24">
            <p-form-model-item ref="ruleNo" label="条码规则编码 " prop="ruleNo">
              <p-input
                disabled
                v-model="form.ruleNo"
              />
            </p-form-model-item>
          </p-col>
          <p-col :xl="8" :lg="7" :md="8" :sm="24">
            <p-form-model-item ref="barcodeRuleId" label="条码规则名称" prop="barcodeRuleId">
              <p-select style="width: 120px" v-model="form.barcodeRuleId" @change="handleSelectChange">
                <p-select-option :value = 'item.id' v-for="(item, index) in mesBcRuleList" :key="index">
                  {{item.ruleName}}
                </p-select-option>
              </p-select>

            </p-form-model-item>
          </p-col>
          <p-col :xl="8" :lg="7" :md="8" :sm="24">
            <p-form-model-item ref="qty" label="数量" prop="qty">
              <p-input-number
                v-model="form.qty"
                @blur="
                  () => {
                    $refs.qty.onFieldBlur();
                  }
                "
              />
            </p-form-model-item>
          </p-col>
          <p-col :xl="10" :lg="7" :md="8" :sm="24">
            <p-form-model-item ref="produceNo" label="条码生成编码" prop="produceNo">
              <p-input
                disabled
                style="width: 220px"
                v-model="form.produceNo"
              />
            </p-form-model-item>
          </p-col>
          <p-col :xl="4" :lg="7" :md="8" :sm="24">
            <p-button type="primary" @click="showModal" :disabled='isStartButonDisabled' style="margin-bottom: 20px">
              Start
            </p-button>
          </p-col>
          <p-col :xl="6" :lg="7" :md="8" :sm="24">
            <p-button v-if="isStartButonDisabled" type="primary"  @click="getRuleCodeValue" >
              重新获取条码生成编码
            </p-button>
          </p-col>
        </p-row>
        </p-form-model>      
    </div>
    <div class="box-title">
      条码明细
    </div>
    <div class="box-table">
      <table border="1">
        <tr v-for="(item, index) in codeDetail" :key="index">
          <td v-for="(ele, i) in item" :key="i">
            <p-tooltip placement="top">
              <template slot="title" v-if="ele.mac">
                <span>{{ele.mac}}</span>
              </template>
              <span class="box-table-text">{{ele.barcode}}</span> 
            </p-tooltip>
          </td>
        </tr>
      </table>   
    </div>

    <p-modal
      title="'提示'"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <p>是否继续？</p>
    </p-modal>

  </p-card>
</template>

<script type="text/javascript">
import { postAction, putAction, getAction, api } from '@/api/manage'

export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,      
      labelCol: { span: 11 },
      wrapperCol: { span: 13 },
      other: '',
      form: {
        produceNo: '',
        ruleNo: undefined,
        ruleName: undefined,
        qty: undefined
      },
      mesBcRuleList: [],
      codeDetail: [],
      isStartButonDisabled: false,
      rules: {
        barcodeRuleId: [
          { required: true, message: '请选择条码规则名称', trigger: 'blur' },
        ],
        qty: [
          { required: true, message: '请输入条码数量', trigger: 'blur' },
        ],
      },
      url: {
        mesBcRuleList: '/mes-code/mesBcRule/allByCodeType',
        start: '/mes-code/mesBcProduce/codeProduce', //生成条码
        mesBcProDetail: '/mes-code/mesBcPro/detail'
      }
    }
   },
  mounted() {
    this.getRuleCodeValue()
    this.getMesBcRuleList()
  },
  methods: {
    getMesBcProDetail(){
      const params = {
        barcodeType: 1,
        barcodeProduceNo:  this.form.produceNo,
      }
      getAction(this.url.mesBcProDetail, params).then( res => {
        if (res.success) {
          const num = 5
          let arr = []
          res.data.forEach( (val, index) => {
            let divideFlag = Math.floor(index / num)  
            arr[divideFlag] || (arr[divideFlag] = [] )
            arr[divideFlag].push(val)
          } )
          this.codeDetail = arr
        }
      } )      
    },
    getMesBcRuleList(){
      const params = {
        codeType: 1
      }
      getAction(this.url.mesBcRuleList, params).then( res => {
        console.log('res', res);
        if (res.success) {
          this.mesBcRuleList = res.data
        }
      } )
    },
    getRuleCodeValue() {
      let param = {
        rules: [
          {"ruleCode": "bc_produce_no", "columnName": "bc_produce_no"},
        ]
      }
      putAction(api.ruleBaseURL, param).then(res => {
        // 执行成功，获取返回的值，并赋到页面上
        if (res.success) {
          console.log("生成的编码：" + res.data.bc_produce_no)
          this.form.produceNo = res.data["bc_produce_no"]
          this.isStartButonDisabled = false
        }
      })
    },    
    handleSelectChange(id){
      this.mesBcRuleList.forEach( ele => {
        if (id == ele.id) {
          this.form.ruleNo = ele.ruleNo
          this.form.ruleName = ele.ruleName
        }
      } )
    },

    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.confirmLoading = true;

          const params = {
            barcodeType: 1,
            barcodeRuleId:  this.form.barcodeRuleId,
            barcodeRule:  this.form.ruleName,
            barcodeProduceNo:  this.form.produceNo,
            qty: this.form.qty,
          }

          postAction(this.url.start, params).then( res => {
            if (res.success) {
              this.isStartButonDisabled = true
              this.getMesBcProDetail()
            }else {
              this.$message.warning(res.msg);              
            }
            this.visible = false;
            this.confirmLoading = false;

          } )
        } else {
          this.visible = false;
          return false;
        }
      });
    },
    handleCancel(e) {
      console.log('Clicked cancel button');
      this.visible = false;
    },     
  },
  components: {

  }
}
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>
<style lang="less" scoped>
  .box-title {
    height: 40px;
    line-height: 40px;
    border-radius: 4px;
    padding-left: 20px;
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;    
  }
  .box-params {
    padding-top: 20px;
  }
  .box-table {
    padding-top: 20px;
    table {
      width: 100%;
      tr {
        td{
          height: 40px;
          line-height: 40px;
          text-align: center;
          width: 20%;
          .box-table-text {
            cursor: pointer;
          }          
        }
      }
    }
  }
  .poros-form .poros-form-item {
    min-height: 60px;
  }
</style>
